<template>
	<view class="cul-wrapper">
		<!--这里减掉的60为操作栏的高度和内边距之和-->
		<scroll-view :style="{height:scrollHeight-70+'px'}" scroll-y :scroll-into-view="scrollIndex"
			scroll-with-animation>
			<block v-for="(msg,index) in msgs" :key="index">
				<view :class="[msg.isme?'msg-me':'msg-service']" :id="'msg-'+index">
					<image class="avatar" v-if="!msg.isme" :src="anotherAvatar" lazy-load></image>
					<view class="msg-text">
						<view class="msg-text-content">
							<text>{{msg.data}}</text>
						</view>
					</view>
					<image class="avatar" v-if="msg.isme" :src="meAvatar" lazy-load></image>
				</view>
			</block>
		</scroll-view>


		<!-- 	<view class="operation" :class="{'conversion':false}">
			
			<input ype="text" v-model="msgInput.msg1"  class=""/>
			<input type="text" v-model="msgInput.msg1" :class="[conversion?'msg-input1':'msg-input2']"
				@tap="sub1(msgInput.msg1)" />
				
			<input type="text" v-model="msgInput.msg2" :class="[conversion?'msg-input2':'msg-input1']"
				@tap="sub2(msgInput.msg2)" />
		</view> -->

		<view class="operation">

			<input type="text" v-model="msgInput.msg1" class="msg-input1" />
			<button type="text" class="msg-input2" @tap="sub1(msgInput.msg1)" />

		</view>
	</view>
</template>

<script>
	export default {
		name: 'CulChat',
		props: {
			//聊天窗体高度
			scrollHeight: {
				type: Number,
				default () {
					let height = 0
					//调用uni-app接口获取屏幕高度
					uni.getSystemInfo({
						//成功回调函数
						success(res) {
							//windoHeight为窗口高度，主要使用的是这个
							height = res.windowHeight
						}
					})
					return height
				}
			},
			meAvatar: {
				type: String,
				default: '/static/头像-女.png'
			},
			anotherAvatar: {
				type: String,
				default: '/static/robot illustration_3.png'
			},

		},
		data() {
			return {
				//控制按钮和文本框样式和功能的转换
				conversion: true,
				msgInput: {
					msg1: '',
					msg2: ''
				},
				//消息列表
				msgs: [],
				//滚动位置
				scrollIndex: ''
			}
		},
		methods: {
			//滚动到指定位置
			jumpScroll() {
				//滚动到指定位置之前首先清空scrollIndex的值，否则只能滚动一次，再次调用就会失效
				this.scrollIndex = ''
				this.$nextTick(function() {
					this.scrollIndex = 'msg-' + (this.msgs.length - 1)
				})
			},
			parseSseData(dataChunk) {
				// 这里根据你的数据格式解析dataChunk
				// 例如，如果数据是以 'data:' 开头的，你可以这样处理：
				const lines = dataChunk.split('\n');
				let chatResponseResult = '';
				lines.forEach((line) => {
					if (line.trim().startsWith('data:')) {
						chatResponseResult = line.trim().substring(5); // 去掉 'data:' 前缀
					}
				});
				return chatResponseResult;
			},

			async sub12(val) {

				if (!this.conversion) {
					this.sub(val);
				}
				if (!val || val.trim() === '') {
					return; // 如果val为空，则直接返回不执行后续操作
				}
				this.msgInput.msg1 = '';

				let aiMsg = {
					isme: true,
					data: val
				};
				this.msgs.push(aiMsg);
				this.jumpScroll();

				// console.log("提问：" + val);
				// 王晨，为什么要吃饭



				try {
					const baseUrl = "http://localhost:8080";
					let timer;

					// 使用uni.request发起GET请求，并设置轮询间隔时间
					function pollForResponse(val) {
						uni.request({
							url: `${baseUrl}/stream/chat`,
							method: "GET",
							data: {
								msg: val,
								simulateSse: true // 假设您的后端支持以长轮询方式模拟SSE
							},
							success: (res) => {

								if (res.data) {
									const sseResponse = res.data;

									console.log("AI回复sseResponse：", sseResponse);

									let aiMsg = {
										isme: false,
										data: sseResponse
									};
									this.msgs.push(aiMsg);
									this.jumpScroll();





									// 重新发起轮询请求
									timer = setTimeout(() => pollForResponse(val),
										50); // 轮询间隔可自定义，这里是500毫秒
								}
							},
							fail: (err) => {
								console.error('请求失败：', err);
								clearTimeout(timer);
								// 可能需要重试或其他错误处理逻辑
							}
						});
					}

					// 开始第一次轮询请求
					pollForResponse(val);

				} catch (error) {
					console.error("获取AI回复时出错:", error);
				} finally {
					this.jumpScroll();
				}














			},


			async sub1(val) {
				if (!val || val.trim() === '') {
					return; // 如果val为空，则直接返回不执行后续操作
				}
				this.msgInput.msg1 = '';
				let aiMsg = {
					isme: true,
					data: val
				};
				this.msgs.push(aiMsg);
				this.jumpScroll();

				try {
					const baseUrl = "http://localhost:8080";

					// 使用uni.request发起GET请求
					await uni.request({
						url: `${baseUrl}/stream/chat`,
						method: "GET",
						data: {
							msg: val,
							// 其他可能需要的数据
						},
						success: (res) => {
							// 在这里，this应该指向组件实例
							const sseResponse = res.data;
							console.log("AI回复sseResponse：", sseResponse);

							// 解析SSE数据
							this.parseSseData(sseResponse);


					 

							this.jumpScroll();
						},
						fail: (err) => {
							console.error('请求失败：', err);
						}
					});

				} catch (error) {
					console.error("获取AI回复时出错:", error);
				}
			}
		},
		
		// 解析SSE数据的方法
		parseSseData(sseData) {
			
			
			console.log("parseSseData(sseData)：", sseResponse);
		  // 这里假设sseData是一个字符串，包含了多个SSE消息
		  // 每个SSE消息都是以'data:'开头，后跟实际的消息内容
		  const lines = sseData.split('\n');
		  const messages = [];
		  let currentMessage = '';
		
		  lines.forEach((line) => {
		    if (line.trim().startsWith('data:')) {
		      // 如果当前行是一个新的SSE消息，先保存上一个消息
		      if (currentMessage) {
		        messages.push(currentMessage);
		        currentMessage = '';
		      }
		      // 开始新的消息
		      currentMessage = line.substring(5).trim(); // 去掉'data:'前缀
		    } else if (currentMessage) {
		      // 如果当前行是消息的一部分，继续拼接
		      currentMessage += '\n' + line.trim();
		    }
		  });
		  
		  
		
		  // 确保最后一个消息也被添加到数组中
		  if (currentMessage) {
		    this.msgs.push({
		    	isme: false,
		    	data: currentMessage
		    });
		  }
		
		  return messages;
		},
		mounted() {
			let aiMsg = {
				isme: false,
				data: 'Hello，我是王陈的百科全书，有什么问题尽管问我'
			};

			this.msgs.push(aiMsg);
		},
	}
</script>

<style scoped>
	view {
		box-sizing: border-box;
		overflow: hidden;
	}

	.cul-wrapper {
		width: 100vw;
		padding: 0 35rpx;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}

	.cul-wrapper .scroll-view {
		/* 针对 iOS 平台 */
		-webkit-overflow-scrolling: touch;
		overflow-y: hidden;
	}

	/* 如果需要同时隐藏水平滚动条，可以添加以下规则 */
	.cul-wrapper .scroll-view::-webkit-scrollbar {
		display: none;
		/* 针对 Chrome, Safari 和 Opera */
	}


	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}

	.msg-text {
		width: 560rpx;
	}

	.msg-me>.msg-text {
		display: flex;
		justify-content: flex-end;
	}

	.msg-text-content {
		line-height: 35rpx;
		display: inline-block;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;
	}

	.msg-me>.msg-text>.msg-text-content {
		margin-left: 70rpx;
		background-color: #FFFFFF;
		border: 1rpx solid #d5e0e5;
		border-top-right-radius: 20rpx;
		border-bottom-left-radius: 30rpx;
		border-top-left-radius: 10rpx;
		margin-right: 15rpx;
	}

	.msg-service>.msg-text>.msg-text-content {
		color: #FFFFFF;
		margin-left: 15rpx;
		background-color: #3875ff;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 30rpx;
		border-top-right-radius: 10rpx;
		margin-right: 70rpx;
	}

	.operation {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		background: #FFFFFF;
		padding: 10px 35rpx;
		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
	}

	.conversion {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.msg-input1 {
		background: #FFFFFF;
		height: 40px;
		width: 520rpx;
		border-radius: 10px;
		padding: 0 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.msg-input2 {
		display: flex;
		align-items: center;
		width: 140rpx;
		margin-left: 30rpx;
		height: 40px;
		background-color: #007AFF;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 20px 20px;
		border-radius: 10px;
		/*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
		color: rgba(0, 0, 0, 0);
	}
</style>